import React, { useState, useEffect } from 'react';
import {
  View,
  Image,
  StyleSheet,
  Text,
  TouchableOpacity
} from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Picker from 'react-native-picker';
import { sizesRow, typesList, colorsList, sortsList } from "../mock/constant";
import Tools from '../utils/tools';
import NewSlider from "../components/NewSlider";

function SizeFilter (props) {
  const { navigation } = props;
  const [sizeFilterInfo, setSizeFilterInfo] = useState({
    sizes: "全部",
    types: "全部",
    colors: "全部",
    sorts: "全部",
    prices: "0"
  });

  const onShowPicker = (detail, type) => {
    Picker.init({
      pickerData: detail.types,
      selectedValue: [sizeFilterInfo[type]],
      pickerconfirmBtnText: "confirm",
      pickerCancelBtnText: "cancel",
      pickerTitleText: "",
      onPickerConfirm: data => {
        setSizeFilterInfo({
          ...sizeFilterInfo,
          [type]: data[0]
        })
      },
      onPickerCancel: () => { }
    });
    Picker.show();
  }

  const onSave = () => {
    Tools.setAsyncStorage('sizeFilterInfo', sizeFilterInfo);
  }

  const RenderRowLine = ({ detail, type }) => {
    return (
      <View style={styles.row} key={Math.random()}>
        <Text style={styles.rowLeft}>{detail.title}</Text>
        <TouchableOpacity onPress={() => onShowPicker(detail, type)} activeOpacity={0.8}>
          <View style={styles.rowRight}>
            <Text style={styles.rowRightText}>{sizeFilterInfo[type]}</Text>
            <AntDesign name="down" size={14} color="#000" />
          </View>
        </TouchableOpacity>
      </View>
    )
  }

  const init = () => {
    const val = Tools.getAsyncStorage('sizeFilterInfo');
    val && setSizeFilterInfo(val);
  }

  useEffect(() => {
    init()
  }, []);

  return (
    <View style={styles.page}>
      <View style={styles.content}>
        <RenderRowLine detail={sizesRow} type="sizes" key="sizes" />
        <RenderRowLine detail={typesList} type="types" key="types" />
        <RenderRowLine detail={colorsList} type="colors" key="colors" />
        <View style={styles.progressBox}>
          <NewSlider></NewSlider>
          {/* <Text style={styles.progressBoxText}>价格</Text>
          <View style={styles.progressBoxBar}>
            <Text style={[styles.progressBoxBarCir, styles.progressBoxBarLeft]}></Text>
            <Text style={styles.progressBoxBarMid}></Text>
            <Text style={[styles.progressBoxBarCir, styles.progressBoxBarRight]}></Text>
          </View>
          <View style={styles.progressBoxPrice}>
            <Text style={styles.progressBoxText}>￥0</Text>
            <Text style={styles.progressBoxText}>￥10000</Text>
          </View> */}
        </View>
        <RenderRowLine detail={sortsList} type="sorts" key="sorts" />
        <View style={styles.btnBox}>
          <TouchableOpacity activeOpacity={0.8} onPress={() => onSave()}>
            <Text style={styles.btnBoxText}>应用</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  page: {
    flex: 1,
    display: 'flex',
    alignContent: 'center',
    alignItems: 'center'
  },
  content: {
    width: 335
  },
  row: {
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
    height: 64,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(0, 0, 0,0.1)'
  },
  rowLeft: {
    fontSize: 18,
    color: '#000'
  },
  rowRight: {
    alignItems: 'center',
    justifyContent: 'flex-end',
    flexDirection: 'row',
  },
  rowRightText: {
    fontSize: 18,
    color: '#000',
    minWidth: 80,
    height: '100%',
    lineHeight: 64,
    textAlign: 'right',
    marginRight: 3
  },
  btnBox: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  btnBoxText: {
    width: 170,
    height: 50,
    backgroundColor: '#000',
    textAlign: 'center',
    lineHeight: 46,
    color: '#fff',
    borderRadius: 50,
    fontSize: 18,
    marginTop: 45,
    marginBottom: 20
  },
  progressBox: {
    height: 238,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center'
  },
  progressBoxText: {
    color: 'rgb(0, 0, 0)',
    fontSize: 18,
    lineHeight: 30,
    height: 30
  },
  progressBoxPrice: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%'
  },
  progressBoxBar: {
    width: '100%',
    height: 8,
    backgroundColor: '#707070',
    borderRadius: 8,
    marginVertical: 39,
    position: 'relative'
  },
  progressBoxBarCir: {
    width: 40,
    height: 40,
    backgroundColor: 'rgb(255, 255, 255)',
    borderWidth: 2,
    borderColor: 'rgb(0, 0, 0)',
    borderRadius: 40,
    position: 'absolute',
    top: -17
  },
  progressBoxBarLeft: {
    left: 0
  },
  progressBoxBarRight: {
    left: 50
  }
})

export default SizeFilter;